[Day 28] 記錄技術細節-在使用Apollo前為整個<App /> 註冊吧

2024 iThome 鐵人賽

DAY 28

佛心分享-SideProject30

用 Next.js 實作屋況查詢評估專家網站系列第 28 篇

16th鐵人賽

yc1996

2024-08-28 07:42:55

70 瀏覽

分享至

問題：Next.js 出現 Unhandled Runtime Error

錯誤訊息如下：
Next.js 就會出現 Unhandled Runtime Error

Invariant Violation: An error occurred! For more details, see the full error text at https://go.apollo.dev/c/err#%7B%22version%22%3A%223.10.6%22%2C%22message%22%3A49%2C%22args%22%3A%5B%5D%7D

問題背景

在使用 Next.js 並搭配 Apollo Client 進行 GraphQL 請求時，出現了上述錯誤。為了解決這個問題，我們需要將 ApolloProvider 正確地包裹在整個應用的最外層，並且確保正確的上下文傳遞。

解決方案：自定義 ApolloProvider 組件

建立 ApolloProvider 組件：

由於之後可能有其他套件需要註冊，所以我們將 ApolloProvider 包裝成一個自定義組件，並命名為 Apollo，以便更靈活地管理上下文。

"use client";

import React from "react";
import { ApolloProvider } from "@apollo/client";

import client from "@/apollo/client";

export default function Apollo({ children }: { children: React.ReactNode }) {
  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

在這個組件中，我們從 Apollo Client 套件庫中解構出 ApolloProvider，並使用 client 屬性來傳遞 GraphQL 客戶端上下文，將整個應用包裹起來。

在 Layout 中使用 ApolloProvider 組件：

將 Apollo 組件引入到主要的 RootLayout 中，這樣它就可以覆蓋整個應用並提供 GraphQL 客戶端的上下文。

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

import ApploProvider from "@/provider/Apollo";

const inter = Inter({ subsets: ["latin"] });
const queryClient = new QueryClient();
export const metadata: Metadata = {
  title: "居家安全評估專家網",
  description: "",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <ApploProvider>
        <body className={inter.className}>
          <BasicLayout>{children}</BasicLayout>
        </body>
      </ApploProvider>
    </html>
  );
}

透過正確使用 ApolloProvider 並包裹應用，我們可以有效地避免在使用 Apollo Client 時出現的 Unhandled Runtime Error。記住這次的解決方案，以後遇到類似的問題就不會再踩到這個坑了！